<template>
    <!-- 折线图容器 -->
    <div ref="chartRef" class="chart-container"></div>
</template>

<script setup>
// 引入 vue 相关方法
import { onMounted, ref, watch } from 'vue'
// 引入 echarts
import * as echarts from 'echarts'
// 引入 axios 用于请求数据
import axios from 'axios'
// 引入防抖工具
import { debounce } from '@/tools/debounce.js'
// 引入样式
import '@/assets/chart.css'

const chartRef = ref(null) // 图表 DOM 引用
let chartInstance = null   // echarts 实例
const windowWidth = ref(window.innerWidth) // 窗口宽度

// 初始数据
const initialData = {
    categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
    expected: [120, 132, 101, 134, 90, 230, 210],
    actual: [220, 182, 191, 234, 290, 330, 310]
}

// 获取父组件传递的数据
const props = defineProps(['data'])

// 用于存储从请求中获取的数据
const categories = ref(initialData.categories)
const expectedData = ref(initialData.expected)
const actualData = ref(initialData.actual)

// 图表配置
const chartOptions = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['预期值', '实际值']
    },
    toolbox: {
        feature: {
            saveAsImage: { show: false }
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: categories,
            axisLabel: {
                interval: 0, // 强制显示所有标签
                rotate: 45 // 旋转标签，避免重叠
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                formatter: `{value} ${props.data.unit}` // 使用父组件传递的单位
            }
        }
    ],
    series: [
        {
            name: '预期值',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: expectedData
        },
        {
            name: '实际值',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: actualData
        }
    ]
})

// 初始化图表
const initChart = () => {
    if (chartRef.value.clientWidth > 0 && chartRef.value.clientHeight > 0) {
        chartInstance = echarts.init(chartRef.value)
        chartInstance.setOption(chartOptions.value)
    }
}

// 监听窗口大小变化，更新图表
watch(windowWidth, () => {
    if (chartInstance) {
        chartInstance.resize()
    }
}, { immediate: true })

// 挂载时初始化图表
onMounted(() => {
    initChart()
    window.addEventListener('resize', debounce(() => windowWidth.value = window.innerWidth, 200))
    if (windowWidth.value < 768 && chartInstance) {
        chartInstance.resize({
            width: 300,
            height: 200
        })
    }
    // fetchData() // 获取数据 记得解除注释
})

// 获取数据（可用于动态请求后端数据）
const fetchData = async () => {
    try {
        const response = await axios.get(props.data.getUrl) // 替换为你的 API 地址
        const data = response.data

        // 更新数据
        categories.value = data.categories || initialData.categories
        expectedData.value = data.expected || initialData.expected
        actualData.value = data.actual || initialData.actual

        // 更新图表
        chartInstance.setOption({
            xAxis: {
                data: categories.value
            },
            series: [
                {
                    data: expectedData.value
                },
                {
                    data: actualData.value
                }
            ]
        })
    } catch (error) {
        console.error('获取数据失败:', error)
    }
}
</script>